<template>
  <div class="container">
    <div class="common">
      <div class="relative">
        <img v-lazy="pageImgArr.pic01" alt="">
        <img id="share" @click="shareForWechat" v-lazy="pageImgArr.pic20" alt="">
        <div class="danmu-wrapper"><div class="danmu"></div></div>
      </div>
    </div>
    <div class="relative nav" :class="{'fixed':scrollFixed}" ref="tabMenu">
      <img v-lazy="pageImgArr.pic02" alt="">
      <div class="width_25" :class="['scroll0'+(index+1)]" @click="scrollFun(index)" v-for="(item,index) in 4" :key="index"></div>
    </div>
    <div :class="{'abandon':scrollFixed}" ref="abandon" ></div>
    <div class="container" v-for="(item,index) in initPageData" :key="index">
      <div class="title topic-title"><img v-lazy="item.moduleTitle" alt=""></div>
      <div class="goods-wrapper">
        <div class="goods-menu" v-if="item.goodsList.length">
          <goods-item :parentData="item" @childEvent="goForGoodsDetail" v-for="(item,index) in item.goodsList" :key="index"/>
        </div>
      </div>
      <div class="special-wrapper" v-for="(subItem,index) in item.specialList" :key="index">
        <img v-lazy="subItem.imgLink" alt="">
        <div class="entry" :data-id="subItem.goodsLeft" @click="goForSpecialDetail(subItem.goodsLeft)"></div>
        <div class="entry" :data-id="subItem.goodsRight" @click="goForSpecialDetail(subItem.goodsRight)"></div>
      </div>
    </div>
    <div><img v-lazy="pageImgArr.pic19" alt=""></div> 
    <div class="more" v-if="moreData.specialArrList.length">
      <special-item :parentData="item" @childEvent="goForSpecialDetail" v-for="(item,index) in moreData.specialArrList" :key="index"/>
    </div>
  </div>
</template>

<script>
  let scrollTimer=null,swiperTimer=null;
  import GoodsItem from 'components/GoodsItems/lineThree01.vue'
  import SpecialItem from 'components/GoodsItems/specialItem.vue'
  import MaskModal from 'components/maskDown/index.js'
  import { getGoodsListApi, handleMoreApi } from "@/apis/publicApi.js";
  import Barrage from 'min-barrage'
  export default {
    components:{GoodsItem,SpecialItem},
    data(){
      return{
        barrage: '',
        scrollFixed:false,
        pageImgArr:{},
        pageGoodsIds:[
          1583305,1583285,1583291,1583295,1583303,1583283,1583297,1583301,1583293,
          1583165,1583167,1583169,1583171,1583163,1583173,1583287,1583299,1583289,
          1580919,1580931,1580933,1580921,1581371,1580923,1580939,1580937,1580935,
          1582399,1582385,1582401,1582387,1582397,1582391,1582389,1582393,1582395
        ],
        pageGoodsIdArr:[],
        moreData:{
          reqestIds:'69449,69451,69341,69453,69455,69369,69283,69319,69159,69375,69371,69373,69339,69337,69311,69257,69203,69397,69415,69279,69275,69363,69277,69393,69397,69343,69309,69223',
          specialArrList:[]
        },
        initPageData:[
          {
            moduleTitle:require('../../../assets/img/hotExpress/hotExpress03.jpg'),
            goodsList:[],
            specialList:[
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress04.jpg'),
                goodsLeft:'69449',
                goodsRight:'69451'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress05.jpg'),
                goodsLeft:'69341',
                goodsRight:'69453'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress06.jpg'),
                goodsLeft:'69455',
                goodsRight:'69369'
              }
            ]
          },
          {
            moduleTitle:require('../../../assets/img/hotExpress/hotExpress07.jpg'),
            goodsList:[],
            specialList:[
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress08.jpg'),
                goodsLeft:'69283',
                goodsRight:'69319'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress09.jpg'),
                goodsLeft:'69159',
                goodsRight:'69375'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress10.jpg'),
                goodsLeft:'69371',
                goodsRight:'69373'
              }
            ]
          },
          {
            moduleTitle:require('../../../assets/img/hotExpress/hotExpress11.jpg'),
            goodsList:[],
            specialList:[
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress12.jpg'),
                goodsLeft:'69339',
                goodsRight:'69337'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress13.jpg'),
                goodsLeft:'69311',
                goodsRight:'69257'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress14.jpg'),
                goodsLeft:'69203',
                goodsRight:'69397'
              }
            ]
          },
          {
            moduleTitle:require('../../../assets/img/hotExpress/hotExpress15.jpg'),
            goodsList:[],
            specialList:[
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress16.jpg'),
                goodsLeft:'69415',
                goodsRight:'69279'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress17.jpg'),
                goodsLeft:'69275',
                goodsRight:'69363'
              },
              {
                imgLink:require('../../../assets/img/hotExpress/hotExpress18.jpg'),
                goodsLeft:'69277',
                goodsRight:'69393'
              }
            ]
          }
        ]
      }
    },
    created(){
      if( this.shareJudge('isshare') ){ MaskModal(); }
      this.initPageImg();
      this.getGoodsAction();
    },
    mounted(){
      this.barrage=new Barrage({el:'.danmu',speed:20,height:'20px',backColor:'#A8DF84',color:'#000',fontSize:'10px',isLeft:true});
      let that = this;
      let tabLimitDis = 0;
      scrollTimer=setTimeout(function() {
        tabLimitDis = that.$refs.tabMenu.offsetTop;
      }, 300);
      window.onscroll = function() {
        let tabLimitDis = that.$refs.abandon.offsetTop;
        let pageTop = window.scrollY;
        let moduleObj = document.querySelectorAll(".container>.title");
        if (pageTop >= tabLimitDis) { that.scrollFixed=true;} 
        else {that.scrollFixed=false;}
      };
      this.initDanmu();
      this.moreSpecial();
    },
    methods:{
      initDanmu(){
        let danmuText=[
          '夏天的手链我只带施华洛世奇！',
          'Adidas Yeezy的配色要全部安排2333~',
          '不准我NIKE 运动系列没有姓名~',
          '没有匡威Converse的青春是不完整的！',
          'Champion经典logo短袖，啊啊啊啊冲鸭！',
          '来件Supreme，烦恼都抛去hhhhh~',
          '实名Pick拉夫劳伦POLO衫 ，买买买...',
          'LIfe is NB ——NewBalance',
          '买了这支CHANEL口红，就可以再种草新的口红！',
          'MLB的帽子凹造型神器~'
        ];
        let tempSpeed=20;
        if(Math.random()>0.8){
          let random01=Math.floor(Math.random()*10);
          let random02=Math.floor(Math.random()*10);
          let message01=danmuText[random01];
          let message02=danmuText[random02];
          this.barrage.start(message01,{speed:tempSpeed} );
          this.barrage.start(message02,{speed:tempSpeed} );
        }else{
          let random01=Math.floor(Math.random()*10);
          let message01=danmuText[random01];
          this.barrage.start(message01,{speed:tempSpeed} );
        };
        setTimeout(() =>{this.initDanmu()},2000)
      },
      initPageImg(){
        this.pageImgArr={
          pic01:require('../../../assets/img/hotExpress/hotExpress01.jpg'),
          pic02:require('../../../assets/img/hotExpress/hotExpress02.jpg'),
          pic03:require('../../../assets/img/hotExpress/hotExpress03.jpg'),
          pic04:require('../../../assets/img/hotExpress/hotExpress04.jpg'),
          pic05:require('../../../assets/img/hotExpress/hotExpress05.jpg'),
          pic06:require('../../../assets/img/hotExpress/hotExpress06.jpg'),
          pic07:require('../../../assets/img/hotExpress/hotExpress07.jpg'),
          pic08:require('../../../assets/img/hotExpress/hotExpress08.jpg'),
          pic09:require('../../../assets/img/hotExpress/hotExpress09.jpg'),
          pic10:require('../../../assets/img/hotExpress/hotExpress10.jpg'),
          pic11:require('../../../assets/img/hotExpress/hotExpress11.jpg'),
          pic12:require('../../../assets/img/hotExpress/hotExpress12.jpg'),
          pic13:require('../../../assets/img/hotExpress/hotExpress13.jpg'),
          pic14:require('../../../assets/img/hotExpress/hotExpress14.jpg'),
          pic15:require('../../../assets/img/hotExpress/hotExpress15.jpg'),
          pic16:require('../../../assets/img/hotExpress/hotExpress16.jpg'),
          pic17:require('../../../assets/img/hotExpress/hotExpress17.jpg'),
          pic18:require('../../../assets/img/hotExpress/hotExpress18.jpg'),
          pic19:require('../../../assets/img/hotExpress/hotExpress19.jpg'),
          pic20:require('../../../assets/img/hotExpress/hotExpress20.png')
        }
      },
      goForGoodsDetail(id){
        this.$navtiveUtils.jump2goods(id);
      },
      goForSpecialDetail(id){
        this.$navtiveUtils.jump2special(id);
      },
      getGoodsAction(){
        let param=this.pageGoodsIds.toString();
        getGoodsListApi(param).then(res =>{
          this.initPageData.forEach((item,index) =>{
            let fromIndex=index*9,toIndex=(index+1)*9;
            item.goodsList=res.data.slice(fromIndex,toIndex);
          });
        })
      },
      moreSpecial() {
        handleMoreApi(this.moreData.reqestIds).then(res => {
          this.moreData.specialArrList = res.data;
        });
      },
      shareJudge(e) {
        let temp = window.location.search.replace("?", "").split("&");
        let isFlag = false;
        for (let index = 0; index < temp.length; index++) {
          isFlag += temp[index].split("=").includes(e);
        }
        return isFlag;
      },
      shareForWechat() {
        let that = this;
        let pageTitle=document.title ;
        setTimeout(function() {
          that.$navtiveUtils.share(pageTitle, "潮流精选好货，限时折扣中，快来抢购！","");
        }, 300);
      },
      scrollFun(idx) {
        let domEl = document.querySelectorAll(".container .topic-title");
        let tabHeight = document.querySelectorAll(".nav")[0].clientHeight;
        let domElTop = domEl[idx].offsetTop - tabHeight;
        window.scrollTo({ top: domElTop, behavior: "smooth" });
      },
    },
    destroyed(){
      scrollTimer=null;
      window.clearTimeout(scrollTimer);
    }
  }
</script>

<style lang="less" scoped>
.relative{
  position: relative;
  #share{
    width: 1.05rem;
    height: 0.5rem;
    position: absolute;
    top: 0.2rem;right: 0;
  }
  .danmu-wrapper{
    width: 100%;
    height: 2.4rem;
    position: absolute;
    bottom: 0rem;left: 0;
    .danmu{height: 100%;}
  }
}
.nav{
  width: 100%;
  height: 1.36rem;
  overflow: hidden;
  position: relative;
  div[class*='width']{
    width: 1.2rem;
    height: 100%;
    position: absolute;
    top: 0;left: 0;
    &.scroll01{left: 0.62rem;}  
    &.scroll02{left: 2.32rem;}  
    &.scroll03{left: 3.92rem;}  
    &.scroll04{left: 5.65rem;}  
  }
  &.fixed{
    position: fixed;
    top: 0;left: 0;
    z-index: 50;
  }
}
.abandon{padding-top:1.36rem; }
.container{
  .goods-wrapper{
    margin: 0 0.15rem;
    padding: 0.08rem;
    background: #82E2A1;
    .goods-menu{
      display: flex;
      flex-wrap: wrap;
      padding: 0.15rem;
      background: #E5F7EA;
    }
  }
  .special-wrapper{
    position: relative;
    .entry{
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;left: 50%;
      &:nth-child(2n){left: 0;}
    }
  }
}
</style>